<template>
  <div id="index">
    <div class="app-container"
      id="container">

      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="180px"
        label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">面诊信息</em>
          </div>
          <el-row>
            <el-col :span="21">
              <el-form-item label="了解渠道">
                <el-radio-group v-model="form.qudao">
                  <el-radio v-for="item in qudaoOptions"
                    :key="item.dictValue"
                    :label="item.dictValue">{{
                                                item.dictValue
                                        }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">
              <el-form-item label="了解方式">
                <el-radio-group v-model="form.contactType">
                  <el-radio v-for="item in typeOptions"
                    :key="item.dictValue"
                    :label="item.dictValue">{{
                                                item.dictValue
                                        }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">

              <el-form-item label="睡眠情况">
                <el-radio-group v-model="form.sleepInfo">
                  <el-radio v-for="item in infoOptions"
                    :key="item.dictValue"
                    :label="item.dictValue">{{
                                                item.dictValue
                                        }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">
              <el-form-item label="项目过敏&不良反应">
                <el-checkbox-group v-model="form.allergyList">
                  <el-checkbox v-for="item in allergyOptions"
                    :key="item.dictValue"
                    :label="item.dictValue"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-link type="primary"
                style="line-height:34px;"
                :underline="false"
                @click="handleAdd('sheet_allergy')">新增</el-link>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">
              <el-form-item label="过往病史">
                <el-checkbox-group v-model="form.medicalHistoryList">
                  <el-checkbox v-for="item in historyOptions"
                    :key="item.dictValue"
                    :label="item.dictValue"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-link type="primary"
                style="line-height:34px;"
                :underline="false"
                @click="handleAdd('sheet_medical_history')">新增</el-link>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">

              <el-form-item label="3个月治疗情况">
                <el-checkbox-group v-model="form.cure3MonthList">
                  <el-checkbox v-for="item in monthOptions"
                    :key="item.dictValue"
                    :label="item.dictValue"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <el-col :span="1">
              <el-link type="primary"
                style="line-height:34px;"
                :underline="false"
                @click="handleAdd('sheet_cure_3_month')">新增</el-link>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">

              <el-form-item label="曾做过的微整项目">
                <el-input placeholder="请输入内容"
                  v-model="form.faceItem">
                  <template slot="prepend">面部:</template>
                </el-input>

                <el-input style="margin-top: 20px;"
                  placeholder="请输入内容"
                  v-model="form.bodyItem">
                  <template slot="prepend">身体:</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">

              <el-form-item label="往期面诊建议">
                <el-input placeholder="请输入内容"
                  v-model="form.beforeInterviewSuggestions">
            
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">

              <el-form-item label="本期面诊建议">
                <el-input placeholder="请输入内容"
                  v-model="form.InterviewSuggestions">
                  </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21">
              <el-form-item label="备注">
                <el-input type="textarea"
                  placeholder="请输入内容"
                  v-model="form.remark"
                  maxlength="30"
                  show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

      </el-form>
      <div class="dw">
        <el-button @click="colsePro"
          style="margin-top: 10px;margin-left: 40%;">返回</el-button>
        <el-button type="primary"
          @click="submitForm"
          style="margin-top: 10px;">保存</el-button>
      </div>
    </div>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body>
      <el-form ref="dataForm"
        :model="dataForm"
        label-width="80px">

        <el-form-item label="数据标签"
          prop="dictLabel">
          <el-input v-model="dataForm.dictLabel"
            placeholder="请输入数据标签" />
        </el-form-item>
        <el-form-item label="数据键值"
          prop="dictValue">
          <el-input v-model="dataForm.dictValue"
            placeholder="请输入数据键值" />
        </el-form-item>
        <el-form-item label="数据ICON"
          prop="dictIcon">
          <imageArraySize :imageStr.sync="dataForm.dictIcon"
            :key="form.dictIcon"
            :msg="'图片要求：宽高40px，大小1M内。'"
            :limit="1"
            ref="child"></imageArraySize>
        </el-form-item>
        <el-form-item label="显示排序"
          prop="dictSort">
          <el-input-number v-model="dataForm.dictSort"
            controls-position="right"
            :min="0" />
        </el-form-item>

        <el-form-item label="备注"
          prop="remark">
          <el-input v-model="dataForm.remark"
            type="textarea"
            placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForms">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import imageArraySize from "@/components/ImageUpload/imageArraySize";
import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";

import {
  getSheet, addOrEdit
} from "@/api/customerService/sheet";
export default {
  components: {
    imageArraySize
  },
  data () {
    return {
      form: {
        cure3MonthList: [],
        medicalHistoryList: [],
        allergyList: [],
      },
      dataForm: {
        dictIcon: "",
        dictLabel: "",
        dictSort: 0,
        dictType: "",
        dictValue: "",
        status: "0"
      },
      rules: {},
      qudaoOptions: [],
      typeOptions: [],
      infoOptions: [],
      allergyOptions: [],
      historyOptions: [],
      monthOptions: [],
      title: "",
      open: false,
      statusOptions: [],
    };
  },

  created () {
    this.getList();
    this.form.customerId = this.$route.query.customer
    const id = this.$route.params && this.$route.params.sheetId;
    if (id != 0 && id != undefined) {
      getSheet(id).then(response => {
        this.form = response.data
      })
    }
  },
  methods: {
    handleAdd (value) {
      this.open = true;
      this.title = "添加字典数据";
      this.dataForm.dictType = value;
    },
    getList () {
      this.getDicts("sheet_qudao").then((response) => {
        this.qudaoOptions = response.data;
      });
      this.getDicts("sheet_contact_type").then((response) => {
        this.typeOptions = response.data;
      });
      this.getDicts("sheet_sleep_info").then((response) => {
        this.infoOptions = response.data;
      });
      this.getDicts("sheet_allergy").then((response) => {
        this.allergyOptions = response.data;
      });
      this.getDicts("sheet_medical_history").then((response) => {
        this.historyOptions = response.data;
      });
      this.getDicts("sheet_cure_3_month").then((response) => {
        this.monthOptions = response.data;
      });
      this.getDicts("sys_data_status").then((response) => {
        this.statusOptions = response.data;
      });
    },

    submitForm () {
      addOrEdit(this.form).then(repseon => {
        this.msgSuccess("操作成功");
        this.colsePro();
      });


    },
    submitForms: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$refs.child.selectImg();
          if (this.dataForm.dictCode != undefined) {
            updateData(this.dataForm).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addData(this.dataForm).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel () {
      this.dataForm = {
        dictIcon: "",
        dictLabel: "",
        dictSort: 10,
        dictType: "",
        dictValue: "",
        status: "0"
      },
        this.open = false;

    },
    colsePro () {
      // this.$router.go(-1)
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/store/memberList/newCustomer",
        query: {
          t: Date.now()
        }
      });
    }
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 50px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 60px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 100px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}

.div-append {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
}

.div-appendHide {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
  visibility: hidden;
}
</style>